<template>
  <div class="login_main">
    <div class="title_box ">
      <div class="size_22">绣娘丝绸后台管理系统</div>
      <div style="width: 80%;margin: 20px auto;">
        <div class="login_main_item">
          <el-input v-model.trim="ruleForm.username" clearable placeholder="请输入用户名称"></el-input>
        </div>
        <div class="login_main_item">
          <el-input v-model.trim="ruleForm.password" clearable placeholder="请输入登录密码"></el-input>
        </div>
      </div>
      <div style="width: 80%;margin: 0 auto;">
        <el-button size="small" type="primary" :loading="loading" @click="submitForm" @keyup.enter="keyDown(e)"
          style="width: 100%;">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/main/Login'
import md5 from 'js-md5'
export default {
  name: "Login",
  components: {},
  data() {
    return {
      ruleForm: {
        username: 'admin',
        password: "123456"
      },
      loading: false
    };
  },
  mounted() {
    // 绑定监听事件
    window.addEventListener("keydown", this.keyDown);
  },
  methods: {
    submitForm() {
      login({
        username: this.ruleForm.username,
        password: md5(this.ruleForm.password)
      })
        .then(res => {
          if (res.status == 1) {
            this.$message.success(res.msg);
            localStorage.setItem("token", res.data.token)
            this.$router.push({
              path: "/main",
              query: {},
            });
          } else {
            this.$message.warning(res.msg);
          }
        })
        .catch(err => {
          // console.log(err);
        });
    },
    keyDown(e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode == 13) {
        this.submitForm(); // 定义的登录方法
      }
    },
  },
  destroyed() {
    // 销毁事件
    window.removeEventListener("keydown", this.keyDown, false);
  },
};
</script>

<style lang="less" scoped>
.login_main {
  background: rgb(49, 71, 144);
  height: 100%;
}

.title_box {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 10px;
  font-weight: 300;
  font-size: 48px;
  width: 500px;
  height: 300px;
  background: #fff;
  border-radius: 5px;

  .login_main_item {
    margin-top: 20px;
  }
}
</style>
